<template>
<div style="height:100%">
  <div class="buttonarea">

   
  </div>
 
<div >
  <el-table
      :data="policys"
      style="width: 100%;"
      row-key="id"
      border
       >
      <!-- <el-table-column
      type="selection"
      width="55">
    </el-table-column> -->
  <el-table-column
   align="center"
    prop="id"
    label="保单编号"
    width="120">
  </el-table-column>
  <el-table-column
   align="center"
    prop="productname"
    label="保险产品">
  </el-table-column>
  <el-table-column
  align="center"
    prop="customer.username"
    label="客户名称">
  </el-table-column>
  <el-table-column
    prop="policycompany"
     align="center"
    label="承保公司"
    width="120">
  </el-table-column>
  <el-table-column
   align="center"
    label="状态"
    width="80">
    <template  slot-scope="scope">
 {{converstatus(scope.row.status)}}({{scope.row.waitcounts}})    </template>   
    </el-table-column>
    <el-table-column
     align="center"
    label="保险有效期">
      <template slot-scope="scope">
    {{getNowFormatDate(scope.row.begintime)}}-{{getNowFormatDate(scope.row.endtime)}}
    </template>
    </el-table-column>
     <el-table-column
    prop="availablefapiaopayment"
    :formatter="formatavailable"
     align="center"
    label="可开票金额"
    width="120">
  </el-table-column>
    <el-table-column
    fixed="right"
     align="center"
    label="操作"
    width="350">
    <template slot-scope="scope">
      <!-- <el-button slot="reference" type="text" size="small">查看</el-button> -->
      <el-button type="text" size="small" v-if="scope.row.pdfurl" @click="toshowpdf(scope.row)">查看保单</el-button>
      <el-button type="text" size="small"  @click="toadd(scope.row)" >增减人员</el-button>
      <el-button v-if="!scope.row.fapiaotag||scope.row.fapiaotag==0" type="text" size="small" @click="available=scope.row.availablefapiaopayment;form={};dataitemindex=scope.$index;fapiaoFormVisible = true">申请发票</el-button>
     <el-button v-if="scope.row.fapiaotag" type="text" size="small" @click="available=scope.row.availablefapiaopayment;form={};dataitemindex=scope.$index;getfapiaoinfo()">发票申请中</el-button>

      <el-button type="text" size="small"  @click="shoukuan(scope.row.id)">付款</el-button>
      <el-button type="text" size="small"  @click="tohis(scope.row.id)">历史账单</el-button>
       <el-button type="text" size="small" @click="tolipei(scope.row)">理赔申请</el-button>
    </template>
  </el-table-column>
  </el-table>

<div class="block" style='text-align: center'>
      <el-pagination
    
     @current-change="handleCurrentChange"
     :current-page.sync="page"
     :page-size="10"
     background
     layout="total, prev, pager, next"
     :total="total">
   </el-pagination>
 </div>  
 <el-dialog title="付款二维码" :visible.sync="shoukuanVisible" width="500px">
    <img :src="codeurl" style="width: 400px;margin: 10px;">
    <!-- <img src="../../img/zhifubao.jpg" style="width: 400px;margin: 10px;"> -->

    </el-dialog>

  </div>

    <el-dialog
  title="订单列表"
  :visible.sync="orderVisible"
  width="50%"
   >
  <el-table :data="orders">
          
    <el-table-column width="200"   label="应付款日期"><template slot-scope="scope">{{getNowFormatDate(scope.row.consignTime)}}</template></el-table-column>
    <el-table-column width="100" property="payment" label="付款金额"></el-table-column>
    <el-table-column width="100"   label="付款状态">   <template slot-scope="scope">{{scope.row.status==0?'未付款':'已付款'}}</template></el-table-column>
    <el-table-column  label="操作" width="100">
        <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">确认已付款</el-button> -->
           <el-button type="text" v-if="scope.row.status==0" size="small" @click="showqrcode(scope.row.id)">付款二维码</el-button>  

          </template>
    
    </el-table-column>
  </el-table>
          <span slot="footer" class="dialog-footer">
    <el-button @click="orderVisible = false">取 消</el-button>
   

    <el-button type="primary" @click="orderVisible=false">关闭</el-button>
     
  </span>
</el-dialog>

<el-dialog title="发票申请" :visible.sync="fapiaoFormVisible">
  <div style="margin-bottom:20px;font-size:16px">可开票金额：{{available?available:0}}</div>
  <el-form :model="form">
    <el-form-item label="申请开票金额" :label-width="formLabelWidth">
      <el-input type="number" v-model="form.money" placeholder="请输入申请开票的金额"></el-input>
    </el-form-item>
    <el-form-item label="企业名称" :label-width="formLabelWidth">
      <el-input v-model="form.companyname" placeholder="请输入申请发票企业的名称"></el-input>
    </el-form-item>
    <el-form-item label="纳税人识别号" :label-width="formLabelWidth">
      <el-input v-model="form.systemno" placeholder="请输入申请发票企业的纳税人识别号"></el-input>
    </el-form-item>
      <el-form-item label="企业地址" :label-width="formLabelWidth">
      <el-input v-model="form.addr" placeholder="请输入申请发票企业的地址"></el-input>
    </el-form-item>
    <el-form-item label="开户银行名称" :label-width="formLabelWidth">
      <el-input v-model="form.bankname" placeholder="请输入申请发票企业的开户银行名称"></el-input>
    </el-form-item>
    <el-form-item label="对公账号发票接收地址" :label-width="formLabelWidth">
      <el-input v-model="form.addr2" placeholder="请输入申请发票企业的对公账号发票接收地址"></el-input>
    </el-form-item>
    <el-form-item label="发票接收人姓名" :label-width="formLabelWidth">
      <el-input v-model="form.username" placeholder="请输入申请发票企业的发票接收人姓名"></el-input>
    </el-form-item>
      <el-form-item label="发票接收人手机" :label-width="formLabelWidth">
      <el-input v-model="form.phone" placeholder="请输入申请发票企业的发票接收人手机"></el-input>
    </el-form-item>
    <el-form-item label="发票接收人邮箱" :label-width="formLabelWidth">
      <el-input v-model="form.email" placeholder="请输入申请发票企业的发票接收人邮箱"></el-input>
    </el-form-item>
    <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item> -->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="fapiaoFormVisible = false">取 消</el-button>
    <el-button v-if="!form.fapiaotag||form.fapiaotag==0" type="primary" @click="savefapiaoinfo">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<script>
import { getfapiaoinfo,savefapiaoinfo,payorder,getpolicysbycustomerid,getorders } from '@/api/policy'

export default {
  name: 'customerlead',
  components: { },
    computed: {
  },
   data() {
      return {
        fapiaoFormVisible:false,
        available:0,
        dataitemindex:0,
        page:1,
        size:10,
        total:0,
        codeurl:'',
        shoukuanVisible:false,
        orderVisible:false,
        orders: [{
          date: '2016.05.01-2016.05.1',
          fkbf: '1000.00',
          fkstate: '已付款'
        }, {
          date: '2016.07.01-2016.08.01',
          fkbf: '1000.00',
          fkstate: '已付款'
        }, {
          date: '2016.07.01-2016.08.01',
          fkbf: '1000.00',
          fkstate: '已已付款结清'
        }, {
          date: '2016.07.01-2016.08.01',
          fkbf: '1000.00',
          fkstate: '未付款'
        }],
        comtype:'',
        fkstatevalue:'',
        input3: '',
        select: '',
        policys: [ ],
 
form: {
 
        },
        formLabelWidth: '180px'

      }},
  components:{


  },
  activated(){
    // this.getpossiblemembers(0);

  },
  mounted(){
 this.getpolicys();
 this.initwebsocket();
  },
    beforeDestroy(){
  console.log(this.websocket);
  this.websocket.close(); 
  console.log('websocket链接关闭');
  },
  methods:{
formatavailable(row){
            var balance=row.availablefapiaopayment;
            if(!balance)
            return 0;
            else
            return balance;
},
    tolipei(po){
      sessionStorage.setItem('order',JSON.stringify(po))
     this.$router.push("/lpsq")
    },
     converstatus(status)
        {
          // {{scope.row.status==1?'保障中':(scope.row.status==0?'待支付':(scope.row.status==2?'逾期':'失效'))}}
             if(status==1)
             return '保障中'
             else if(status==0)
             return '待支付'
             else if(status==2)
             return '待续费'
             else if(status==3)
             return '逾期待续费'
             else if (status=6)
             return '停止保障'

        },
      initwebsocket(){
      var _this=this;
      var websocket = null;
var host = "crm.zhiyuewulian.com/mapi"; 
var username = JSON.parse(localStorage.getItem("user")).id; // 获得当前登录人员的userName 
console.log('host:'+host);
console.log('ws:'+'wss://'+host+'/websocket?code='+username);
 // alert(username)
//判断当前浏览器是否支持WebSocket 
if ('WebSocket' in window) { 
    // alert("浏览器支持Websocket")
    websocket = new WebSocket('wss://'+host+'/websocket?code='+username); 
} else { 
    // alert('当前浏览器 Not support websocket') 
} 
 this.websocket=websocket;
     console.log('new socket success'+':'+this.websocket);

//连接发生错误的回调方法 
websocket.onerror = function() { 
  console.log("WebSocket连接发生错误")
  console.log("WebSocket连接发生错误"); 
};  
   
//连接成功建立的回调方法 
websocket.onopen = function() {
console.log("WebSocket连接成功") 
 
} 
   
//接收到消息的回调方法 
websocket.onmessage = function(event) {
    console.log("接收到消息的回调方法") 
    console.log("这是后台推送的消息："+event.data);
    _this.setMessageInnerHTML(event.data)
// 　　　　 websocket.close();
// console.log("webSocket已关闭！")
} 
   
//连接关闭的回调方法 
websocket.onclose = function(e) { 
  console.log("WebSocket连接关闭"); 
  console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
  console.log(e)
} 
   
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 
/*window.onbeforeunload = function() { 
  
} */

    },
    //关闭WebSocket连接 
  closeWebSocket() { 
    this.websocket.close(); 
},
    //将消息显示在网页上
      setMessageInnerHTML(innerHTML) {
      //  layer.msg(innerHTML)
      try {
        var messageobj=JSON.parse(innerHTML);
      var message=messageobj.message;
      var orderid=messageobj.orderid;
       if(message.indexOf('支付成功')!=-1)
       {
          // this.$toast("您有订单支付成功")
           this.getpolicys();

     

       }
       if(message.indexOf('refresh')!=-1)
       {
        
          this.getpolicys();

     

       }
      } catch (error) {
        
      }
     

    },
          toshowpdf(policy){
            if(policy.pdfurl)
            sessionStorage.setItem('pdfurl',policy.pdfurl)
            else
         sessionStorage.setItem('pdfurl',"http://crm.zhiyuewulian.com/pdfapi/temp/111.pdf")

        this.$router.push("pdfview")
      },
    topay(){
      this.$router.push("topayorder")
    },
    tohis(id){
      this.$router.push("hisbill?id="+id)
    },
    toadd(row){
      sessionStorage.setItem('itemids',JSON.stringify(row.itemids))
      this.$router.push("addcustomerlead?id="+row.id)
    },
       getNowFormatDate(dt) {
        var date = new Date(dt);
        var seperator1 = ".";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    },
        handleCurrentChange(){
          this.getpolicys();
        },
        showqrcode(orderid){

          // 
         this.pays(orderid,'https://ynujly.hxxdib.com',2);
           //payorder,getqrcode
        },
        shoukuan(policyid){
          //   this.orders=[];
          // this.orderVisible = true;
          // this.getorders(policyid);
          this.$router.push("topayorder?id="+policyid)

        },
        getpolicys(tag){
          this.$loadingshow();
       getpolicysbycustomerid({ page:this.page,size:this.size }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
          this.policys=res.result.list;
           this.total=res.result.total;
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },


      
      getfapiaoinfo(){
         var policy=this.policys[this.dataitemindex];
             
          this.$loadingshow();
       getfapiaoinfo({policyid:policy.id}).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
               this.form=res.result;
               this.form.fapiaotag=policy.fapiaotag;
               this.fapiaoFormVisible=true;
              console.log('tag:'+this.form.fapiaotag)
              //  this.$forceUpdate();
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },
           savefapiaoinfo(){
             var policy=this.policys[this.dataitemindex];
             this.form.policyid=policy.id;
              if(!this.form.money||this.form.money.trim()==''||this.form.money==0)
             {
                     this.$toast('申请开票金额未输入')
                      return;
             }
             if( this.form.money>this.available)
             {
                this.$toast('可开票金额不足')
                      return;
             }
             if(!this.form.companyname||this.form.companyname.trim()=='')
             {
                     this.$toast('企业名称未输入')
                      return;
             }
                          if(!this.form.systemno||this.form.systemno.trim()=='')
             {
                  this.$toast('纳税人识别号未输入')
                   return;

             }
                          if(!this.form.addr||this.form.addr.trim()=='')
             {
                  this.$toast('企业地址未输入')
                   return;

             }
                          if(!this.form.bankname||this.form.bankname.trim()=='')
             {
   this.$toast('开户银行名称未输入') 
    return;
             }
                          if(!this.form.addr2||this.form.addr2.trim()=='')
             {
                  this.$toast('对公账号发票接收地址未输入')
                   return;

             }
                   if(!this.form.username||this.form.username.trim()=='')
             {
   this.$toast('发票接收人姓名未输入')
    return;
             }
                          if(!this.form.phone||this.form.phone.trim()=='')
             {
   this.$toast('发票接收人手机号未输入')
    reutrn;
             }
          if(!this.form.email||this.form.email.trim()=='')
             {
                  this.$toast('发票接收人电子邮箱未输入')
            return;
             }
              
          this.$loadingshow();
       savefapiaoinfo(this.form).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
                  this.$toast(res.result)
                  this.policys[this.dataitemindex].fapiaotag=1;
                  this.fapiaoFormVisible = false
        } 
        else{
          this.$toast(res.message)
        }
      });
        


      },
      getorders(policyid){


           this.$loadingshow();
       getorders({ page:this.page,size:this.size, policyid:policyid }).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
                    this.orders=res.result.list;

        } 
        else{
          this.$toast(res.message)
        }
      });
        



       

      },





   pays(orderid,redirecturl,paymenttype)
{


        this.$loadingshow();
       payorder({  orderid:orderid,type:paymenttype,redirect:redirecturl}).then(res => {
              this.$loadingclose();
       if (res.code == 200) {
           this.codeurl=res.result.codeurl;
            this.shoukuanVisible = true;

        } 
        else{
          this.$toast(res.message)
        }
      });
        
 
}      
  }
}
</script>

<style lang="scss" scoped>
.buttonarea{
  width:100%;
  height: 50px;
}
.btn{
  position: relative;
    /* left: 73%; */
    float: right;
    right: 9px;
    margin-top: 6px;
}
.block{
      text-align: center;
      margin-top:10px;
}

.documentation-container {
  // margin: 50px;
  .document-btn {
    float: left;
    margin-left: 50px;
    display: block;
    cursor: pointer;
    background: black;
    color: white;
    height: 60px;
    width: 200px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
  }
}
   .popstyle{
        width: 100%;
        height: 30%;
    }
    .userfile{
    width: 90px;
    height: 30px;
    background: cornflowerblue;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 20px;
}
/deep/  .el-input {
  width:60%;
}
/deep/ .el-select{
  width:60%;
}
/deep/ .el-form-item{
  width: 100%;
}
</style>
